<template>
    <view>
        <!-- pages/goodsdetails/goodsdetails.wxml -->
        <view>
            <swiper :indicator-dots="true" indicator-color="grey" indicator-active-color="black" :autoplay="true" interval="5000" duration="500">
                <block v-for="(item, index) in swiperImages" :key="index">
                    <swiper-item>
                        <image :src="item" mode="widthFix" class="slide-image" @tap="previewImage" :data-src="item" />
                    </swiper-item>
                </block>
            </swiper>
            <view class="goods-price">
                <text>￥{{ goodsDetail.goods_price }}</text>
            </view>
            <view class="goods-info">
                <text class="goods-name">{{ goodsDetail.goods_name }}</text>
                <view class="collect" @tap="toggleCollect">
                    <text>{{ isCollected ? '已收藏' : '收藏' }}</text>
                </view>
            </view>
            <view class="line_1"></view>
            <view class="img_details">图文详情</view>
            <view class="goods-introduce">
                <rich-text :nodes="goodsDetail.goods_introduce"></rich-text>
            </view>
        </view>

        <view class="bottom_toolbar">
            <view class="toolbar">
                <view class="tool_left">联系客服</view>
                <view class="tool_left">分享</view>
                <view class="tool_left">购物车</view>
                <view class="tool_right inputcat" @tap="addToCart">加入购物车</view>
                <view class="tool_right buynow">立即购买</view>
            </view>
        </view>
    </view>
</template>

<script>
// pages/goodsdetails/goodsdetails.js
export default {
    data() {
        return {
            goodsDetail: {
                goods_price: '',
                goods_name: '',
                goods_introduce: ''
            },
            swiperImages: [],
            isCollected: false
        };
    },
    onLoad: function (options) {
        const gid = options.gid;
        console.log('Received gid:', gid);
        const url = 'https://api-hmugo-web.itheima.net/api/public/v1/goods/detail/?goods_id=' + gid;
        console.log(url);
        uni.request({
            url: url,
            method: 'GET',
            success: (res) => {
                if (res.data && res.data.message) {
                    const goodsDetail = res.data.message;
                    goodsDetail.goods_introduce = goodsDetail.goods_introduce.replace(/\.webp/g, '.jpg');
                    const swiperImages = goodsDetail.pics.map((pic) => pic.pics_big);
                    this.setData(
                        {
                            goodsDetail: goodsDetail,
                            swiperImages: swiperImages
                        },
                        () => {
                            this.loadCollectStatus();
                        }
                    );
                }
            },
            fail: (err) => {
                console.error('请求失败:', err);
            }
        });
    },
    methods: {
        previewImage: function (e) {
            var current = e.currentTarget.dataset.src;
            uni.previewImage({
                current: current,
                urls: this.swiperImages
            });
        },

        loadCollectStatus: function () {
            const goodsId = this.goodsDetail.goods_id;
            const collectList = uni.getStorageSync('collectList') || {};
            this.setData({
                isCollected: collectList[goodsId] || false
            });
        },

        toggleCollect: function () {
            const goodsId = this.goodsDetail.goods_id;
            let collectList = uni.getStorageSync('collectList') || {};
            let isCollected = !this.isCollected;
            this.setData({
                isCollected
            });
            if (isCollected) {
                collectList[goodsId] = true;
            } else {
                delete collectList[goodsId];
            }
            uni.setStorageSync('collectList', collectList);
            uni.showToast({
                title: isCollected ? '收藏成功' : '取消收藏',
                icon: 'success',
                duration: 2000
            });
        },

        addToCart: function () {
            let cart = uni.getStorageSync('cart') || [];
            let goods = this.goodsDetail;
            goods.goods_id = goods.goods_id.toString();
            let exist = cart.find((item) => item.goods_id === goods.goods_id);
            if (exist) {
                exist.goods_count += 1;
            } else {
                goods.goods_count = 1;
                cart.push(goods);
            }
            uni.setStorageSync('cart', cart);
            uni.showToast({
                title: '已加入购物车',
                icon: 'success',
                duration: 2000
            });
        }
    }
};
</script>
<style>
/* pages/goodsdetails/goodsdetails.wxss */
swiper {
    height: 650rpx;
}
.slide-image {
    width: 100%;
    height: 425rpx;
    padding: 0;
    margin: 0;
}
.goods-price {
    color: red;
    font-size: 45 rpx;
    padding-left: 15rpx;
}
.goods-info {
    display: flex;
}
.goods-name {
    width: 80%;
    margin-left: 10rpx;
    border-right: 1rpx grey solid;
    color: grey;
}
.collect {
    text-align: center;
    width: 20%;
    color: grey;
}
.line_1 {
    width: 100%;
    height: 15rpx;
    background-color: rgb(238, 234, 234);
}
.img_details {
    width: 100%;
    height: 50rpx;
    font-size: 40rpx;
    color: red;
    padding-left: 20rpx;
    font-weight: 500;
}
.bottom_toolbar {
    position: fixed;
    bottom: 0;
    width: 100%;
}
.toolbar {
    display: flex;
    width: 100%;
    height: 100rpx;
    border-top: 1rpx grey solid;
    background-color: #fff;
}
.tool_left {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 16%;
    color: black;
    font-size: small;
    background-color: white;
}
.tool_right {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26%;
    font-size: large;
    color: white;
    font-weight: bolder;
}
.inputcat {
    background-color: orange;
}
.buynow {
    background-color: red;
}
</style>
